<template>
	<view>
		<!-- 搜索筛选区 -->
		<view>
			<uni-data-select v-model="categoryId" :localdata="categories" placeholder="请选择商品分类"
				@change="onCategoryChange">
			</uni-data-select>
		</view>

		<!-- 商品列表区 -->
		<view>
			
			<uni-section v-for="item in goodsList" :key="item.id" :title="item.title" type="line">
						<uni-card :title="item.description" :sub-title='formatCurrency(item.price)'  :thumbnail="JSON.parse(item.images)[0]" :is-shadow="false">
							<text class="uni-body">{{item.description}}</text>
						</uni-card>
					</uni-section>
		</view>


		<uni-pagination :show-icon="true" :total="total" @change="navigator" :pageSize='pageSize'/>
		<!-- 悬浮按钮 -->

		<navigator url="/pages/market/goods/index" hover-class="navigator-hover">
			<uni-fab :buttons="buttons"></uni-fab>
		</navigator>
	</view>
</template>

<script>
	import {
		getGoodsList,
		getGoodsCategories,
	} from '@/api/goods'

	export default {
		name: 'market',
		props: {
			categoryId: Number,
			
		},
		data() {
			return {
				categoryId: '',
				categories: [{
						text: '全部',
						value: ''
					}
				],
				goodsList: [],
				buttons: [{
					text: '发布商品',
					iconPath: '/static/add.png',
					backgroundColor: '#FF5722'
				}],
				pageSize: 1,
				total: 0,
				pageNum: 1
			}
		},
		mounted() {
			this.loadGoodsList();
			this.loadCatalist()
		},
		methods: {
			// 加载商品列表
			loadGoodsList() {
				let d = { 'categoryId': this.categoryId, 'pageNum': this.pageNum, 'pageSize': this.pageSize }
				console.log(` 'pageNum': ${this.pageNum}`)
				getGoodsList(d).then(response => {
				  this.goodsList = response.data.rows
				  this.total = response.data.total
				})
			},
			
			loadCatalist() {
				getGoodsCategories().then(response => {
				  response.data.rows.forEach((category, index)=>{
					  this.categories.push({'text': category.name, 'value': category.id})
				  })
				})
			},

			// 分类变更处理
			onCategoryChange(e) {
				this.categoryId = e;
				// 根据分类筛选商品
				this.loadGoodsList();
			},
			
			formatCurrency(price) {
			      return `¥${price.toFixed(2)}`; // 例如：将 19.9 转为 "¥19.90"
			    },
			navigator({type,current}) {
				this.pageNum = current
				this.loadGoodsList()
			}
		},
	}
</script>

<style>
</style>